<template>
  <div class='search bc-white'>
    <p>
      <span v-for="(item, index) in formaltTags" :key="index" :class="{pr:true,isActive:search.category==item.value}" @click="setState(item)">{{item.label}}</span> 
    </p>
    <p>
      <span class="color999">考勤列表</span>
      <span v-if="originalData&&originalData.instructor" class="class fr" @click="showAcheet">{{title}}<van-icon name="arrow-down" class="arrow-down" /></span>
    </p>
  </div>
</template>
<script>
export default {
  props:["search","getListData","pageInfo","selectData","originalData"],
  components: {},
  name: "",
  data() {
    return {
      title:"选择班级",
      menuData:[
        {label:"总考勤",value:0},
        {label:"课程",value:1},
        {label:"晚点名",value:2},
        {label:"宿舍",value:3},
        {label:"会议讲座",value:4},
        {label:"其他",value:5},
      ]
    };
  },
  computed:{
    formaltTags(){
      var goal =null
      if(this.originalData&&this.originalData.category){
        var goal = this.originalData.category.map(val=>{
          return {
            label:val.category_name,
            value:val.category
          }
        })
      }
      return goal||this.menuData
    }
  },
  methods: {
    setState(item){
      this.search.category=item.value
      this.pageInfo.page=1
      this.getSearch()
    },

    showAcheet(){
      this.$store.state.dias.acheet.show=true
      this.$store.state.dias.acheet.columns=[].concat(...this.selectData.data1)
      this.$store.state.dias.acheet.confirm=this.confirm
    },
    confirm(val){
      this.search.class=this.title=val
      this.$store.state.dias.acheet.show=false
      this.pageInfo.page=1
      this.getSearch()
    },
    getSearch(){
     this.pageInfo.page=1
     this.getListData()
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.search {
  padding: 0 20px;

  p{
    height: 80px;
    line-height: 80px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    span{
      margin-right: 20px;
    }
    span.isActive,span.fr{
      color: #00998d;
    }
    span.notice{
      color: #666;
    }
    .isActive:after{
      content:"";
      position: absolute;
      bottom: -3px;
      width: 100%;
      height: 3px;
      background-color: #00998d;
      left: 0;
    }
  }
}
</style>